import {Fragment, useState} from "react";

function List() {

    const list = [
        {id: 1, name: '张三'},
        {id: 2, name: '李四'},
        {id: 3, name: '王五'}
    ];

    const listContent = list.map(item => (

        <Fragment key={item.id}>
            <li>{item.name}</li>
            <li>-------------</li>
        </Fragment>
        /*<li key={item.id}>{item.name}</li>*/

    ));

    const [data, setData] = useState([
        {id: 1, name: '张三'},
        {id: 2, name: '李四'},
        {id: 3, name: '王五'}
    ]);

    // let id = 3;
    function handleClick(){
        setData(
            //[
            // ...data,
            // {id: ++id, name: "小花猫"}
        //]
            data.filter(item => item.id !== 2)
        )
    }

    const listContent2 = data.map(item =>
        <li key={item.id}>{item.name}</li>
    )

    return (
        <>
            <ul className="list">{listContent}</ul>
            <p>---------------------------------------</p>
            <ul>{listContent2}</ul>
            <button onClick={handleClick}>按钮操作</button>
        </>
    )
}
export default List;
